<template>
  <div class="container">
    <ol v-if="tasks && tasks.length > 0">
       <li v-for="(v, i) in tasks" :key="v.id">
           <em v-text="(i + 1) + '.'"></em>
           <span v-text="v"></span>
           <i @click="del(i)">x</i>
       </li>
   </ol>
   <p v-else>列表为空</p>
  </div>
</template>

<script>
export default {
  props: ['tasks'],
  methods: {
    del(i) {
      this.$emit('del', i)
    }
  }
}
</script>

<style scoped>
  .container {
      width: 350px;
      background: rgb(234, 231, 231, .6);
      padding: 10px 15px 20px;
      margin: 0 auto;
      color: rgb(184, 181, 181);
  }
  li {
      position: relative;
      text-align: left;
      color: #949090;
      padding-left: 2px;
      border-bottom: 1px solid rgb(184, 181, 181);
      height: 30px;
      line-height: 30px;
  }

  li>em {
    margin-right: 10px;
  }

  li>i {
    /* line-height: 0; */
    position: absolute;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    padding: 0 5px;
    right: 10px;
    color: rgb(220, 29, 22);
    cursor: pointer;
  }
</style>